		$(document).ready(function(){
			/*WEB SQL DATABASE BLOCK*/
			experiment = {};
			experiment.webdb = {};
			experiment.webdb.db = null;
			experiment.webdb.open = function() {
				var dbSize = 5 * 1024 * 1024; // 5MB
				experiment.webdb.db = openDatabase('trial', '1.0', 'todo manager', dbSize);
			}
			experiment.webdb.onError = function(tx, e) {
				alert('Something unexpected happened: ' + e.message );
			}

			experiment.webdb.onSuccess = function(tx, r) {
				// re-render all the data
				// loadTodoItems is defined in Step 4a
				experiment.webdb.getAllTodoItems(loadTodoItems);
			}
			experiment.webdb.createTable = function() {
				experiment.webdb.db.transaction(function(tx) {
					tx.executeSql('CREATE TABLE IF NOT EXISTS ' + 
							  'todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)', []);
				});
			}
			experiment.webdb.addTodo = function(todoText) {
				experiment.webdb.db.transaction(function(tx){
					var addedOn = new Date();
					tx.executeSql('INSERT INTO todo(todo, added_on) VALUES (?,?)', 
						[todoText, addedOn],
						experiment.webdb.onSuccess,
						experiment.webdb.onError);
				});
			}
			experiment.webdb.getAllTodoItems = function(renderFunc) {
				experiment.webdb.db.transaction(function(tx) {
					tx.executeSql('SELECT * FROM todo', [], renderFunc,	experiment.webdb.onError);
				});
			}
			function loadTodoItems(tx, rs) {
				var rowOutput = "";
				for (var i=0; i < rs.rows.length; i++) {
					rowOutput += renderTodo(rs.rows.item(i));
				}
				var todoItems = document.getElementById('todoItems');
				todoItems.innerHTML = rowOutput;
			}
			function renderTodo(row) {
				return '<li>' + row.ID  +
					 '[<a onclick="experiment.webdb.deleteTodo(' + row.ID + ');">X</a>]</li>';
			}
			experiment.webdb.deleteTodo = function(id) {
				experiment.webdb.db.transaction(function(tx) {
					tx.executeSql('DELETE FROM todo WHERE ID=?', [id],
						null, experiment.webdb.onError);
				});
				experiment.webdb.getAllTodoItems(loadTodoItems);
			}
			function addTodo() {
				var todo = document.getElementById('todo');
				experiment.webdb.addTodo(todo.value);
				todo.value = '';
			}
			function init() {
				experiment.webdb.open();
				experiment.webdb.createTable();
				experiment.webdb.getAllTodoItems(loadTodoItems);
				$('#todoButton').click(addTodo);
			}
			init();
		});